
import React from 'react';
import { Card } from 'antd';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
import 'echarts/lib/chart/radar';

import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';


class EchartsTest extends React.Component {
  constructor(...args) {
    super(...args);
  }
  componentWillReceiveProps({ msg }) {
    const arr = [];
    for (const i in msg) {
      arr.push(msg[i].length);
    }
    const myChart = echarts.init(document.getElementById('radar'));
    const res = '';
    const projectArray = [];
    const showDetails = '';
    const option = {
      title: {
        text: '',
      },
      tooltip: {},
      legend: {
        top: 20,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          color: '#fff',
        },
      },
      radar: {
        radius: '60%',
        splitNumber: 8,
        axisLine: {
          lineStyle: {
            color: 'black',
            opacity: 0.2,
          },
        },
        splitLine: {
          lineStyle: {
            color: 'black',
            opacity: 0.2,
          },
        },
        splitArea: {
          areaStyle: {
            color: 'rgba(127,95,132,.3)',
            opacity: 1,
            shadowBlur: 45,
            shadowColor: 'rgba(0,0,0,.5)',
            shadowOffsetX: 0,
            shadowOffsetY: 15,
          },
        },
        indicator: [{
          name: '当天',

        }, {
          name: '隔天',

        }, {
          name: '周',

        }, {
          name: '月',

        }, {
          name: '季',

        }],
      },
      series: [{
        name: '',
        type: 'radar',
        symbolSize: 0,
        areaStyle: {
          normal: {
            shadowBlur: 13,
            shadowColor: 'rgba(0,0,0,.2)',
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            opacity: 1,
          },
        },
        data: [{
          value: arr,
        }],
      }],
      color: ['#ef4b4c', '#b1eadb'],
      backgroundColor: 'white',
    };


    myChart.setOption(option);
  }
  render() {
    return (
      <Card bodyStyle={{ padding: '0px' }}>
        <div id="radar" style={{ width: '100%', height: '405px' }} />
      </Card>
    );
  }
}

export default EchartsTest;
